<template>
    <div class="app_contain">
        <!--header(头部)-->
        <mt-header fixed title="黑马程序员-我最帅"></mt-header>
	
        <!--动画-->
		<transition>
			<!--中routerview间-->
			<router-view></router-view>
		</transition>
        <!--tabbar(底部))-->
        <nav class="mui-bar mui-bar-tab">
			<router-link class="mui-tab-item" to="/home">
				<span class="mui-icon mui-icon-home"></span>
				<span class="mui-tab-label">首页</span>
			</router-link>
			<router-link class="mui-tab-item" to="/menber">
				<span class="mui-icon mui-icon-contact"></span>
				<span class="mui-tab-label">会员</span>
			</router-link>
			<router-link class="mui-tab-item" to="/shopcar">
				<span class="mui-icon mui-icon-extra mui-icon-extra-cart"><span class="mui-badge">0</span></span>
				<span class="mui-tab-label">购物车</span>
			</router-link>
			<router-link class="mui-tab-item" to="/search">
				<span class="mui-icon mui-icon-search"></span>
				<span class="mui-tab-label">搜索</span>
			</router-link>
		</nav>
    </div>
</template>

<script>

</script>

<style scoped>
.app_contain{
padding-top: 40px;
padding-bottom: 50px;
overflow: hidden;
}
/* .v-enter,.v-leave-to{opacity: 0; transform: translateX(100%)} */
.v-enter{ 
opacity: 0; 
transform: translateX(100%);
filter:Alpha(opacity=0);
}
.v-leave-to{
opacity: 0; 
transform: translateX(-100%); 
position: absolute; 
filter:Alpha(opacity=0);
}
.v-enter-active,.v-leave-active{ 
transition: all 0.4s ease
}

</style>